<template>
	<view class="container">
		

	<view class="content">
		<view class="row b-b">
			<view class="tit">收件人</view>
			<input class="input" type="text" v-model="addressData.receiver_name" placeholder="收件人姓名" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<view class="tit">手机号</view>
			<input class="input" type="number" v-model="addressData.receiver_mobile" placeholder="收件人手机号码" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<view class="tit">所在地区</view>
			<picker @change="bindPickerChange" :value="index" mode = "region">
				<input class="input" type="text" :value="addressData.receiver_province+'/'+addressData.receiver_city+'/'+addressData.receiver_district" placeholder="" placeholder-class="请选择省市区" />
			</picker>
			
		</view>
		<view class="row b-b"> 
			<view class="tit">详细地址</view>
			<input class="input" type="text" v-model="addressData.receiver_address" placeholder="" placeholder-class="placeholder" />
		</view>
		<button class="add-btn" @click="confirm">确定</button>
	</view>	
	<view class="row default-row">
		<text class="tit">设为默认</text>
		<switch :checked="addressData.is_default == 1?true:false" color="#08AFFE" @change="switchChange" />
	</view>
	</view>
</template>

<script>
	import {
		http
	} from 'uview-plus'
	export default {
		data() {
			return {
				index:1,
				addressData: {
					receiver_name: '',
					receiver_mobile: '',
					receiver_address: '',
					receiver_province:'北京市',
					receiver_city:'北京市',
					receiver_district:'东城区',
					is_default: 1
				}
			}
		},
		onLoad(option){
			let title = '新增收货地址';
			if(option.type==='edit'){
				title = '编辑收货地址'
				
				this.addressData = JSON.parse(option.data)
			}
			this.manageType = option.type;
			uni.setNavigationBarTitle({
				title
			})
		},
		methods: {
			bindPickerChange: function(e) {
			            console.log('picker发送选择改变，携带值为', e.detail.value)
			            this.index = e.detail.value
						this.addressData.receiver_province=e.detail.value[0]
						this.addressData.receiver_city=e.detail.value[1]
						this.addressData.receiver_district=e.detail.value[2]
			        },
			switchChange(e){
				this.addressData.default = e.detail;
			},
			
			//地图选择地址
			chooseLocation(){
				uni.chooseLocation({
					success: (data)=> {
						this.addressData.addressName = data.name;
						this.addressData.address = data.name;
					}
				})
			},
			
			//提交
			 async confirm(){
				let data = this.addressData;
				if(!data.receiver_name){
					uni.showToast({
						title:'请填写收货人姓名',
						icon:'none'
					})
					return;
				}
				if(!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.receiver_mobile)){
					uni.showToast({
						title:'请输入正确的手机号码',
						icon:'none'
					})
					return;
				}
				if(!data.receiver_address){
					uni.showToast({
						title:'请填写详细地址',
						icon:'none'
					})
					return;
				}
				if(this.addressData.is_default.value === true || this.addressData.is_default == 1){
					this.addressData.is_default = '1'
				}else{
					this.addressData.is_default = '2'
				}
				
				if(this.manageType == 'edit'){
					var url = '/shop/user/address/update'
					var params = {
							receiver_name:this.addressData.receiver_name,
							receiver_mobile:this.addressData.receiver_mobile,
							receiver_province:this.addressData.receiver_province,
							receiver_city:this.addressData.receiver_city,
							receiver_district:this.addressData.receiver_district,
							receiver_address:this.addressData.receiver_address,
							is_default:this.addressData.is_default,
							user_address_id : this.addressData.id
					}
					
				}else if(this.manageType == 'add'){
					var url = '/shop/user/address/save'
					var params = {
							receiver_name:this.addressData.receiver_name,
							receiver_mobile:this.addressData.receiver_mobile,
							receiver_province:this.addressData.receiver_province,
							receiver_city:this.addressData.receiver_city,
							receiver_district:this.addressData.receiver_district,
							receiver_address:this.addressData.receiver_address,
							is_default:this.addressData.is_default
					}
				}
				await http.post(url,
					params
				).then(res => {
					uni.showToast({
						title:`地址${this.manageType=='edit' ? '修改': '添加'}成功`,
						icon:'none'
					})
					setTimeout(()=>{
						uni.navigateBack()
					}, 800)
				});
				
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: $page-color-base;
		padding-top: 16rpx;
	}
.content{
	width: 690rpx;
	border-radius: 20rpx;
	opacity: 1;
	margin: 20rpx auto;
	padding:30rpx;
	box-sizing: border-box;
	background: #FFFFFF;
}
	.row{
		position: relative;
		margin-bottom: 20rpx;
		.tit{
			flex-shrink: 0;
			width: 120rpx;
			font-size: 30rpx;
			color: $font-color-dark;
		}
		.input{
			flex: 1;
			font-size: 30rpx;
			color: $font-color-dark;
			width: 626rpx;
			height: 96rpx;
			border-radius: 20rpx;		
			background: rgba(143, 146, 161, 0.08);
			padding:0 20rpx;
			box-sizing: border-box;
		}
		.icon-shouhuodizhi{
			font-size: 36rpx;
			color: $font-color-light;
		}
	}
	.default-row{
		width: 690rpx;
		margin:0 auto;
		display: flex;
		margin-top: 16rpx;
		justify-content: space-between;
		padding: 30rpx;
		box-sizing: border-box;
		.tit{
			flex: 1;
		}
		switch{
			transform: translateX(16rpx) scale(.9);
		}
	}
	.add-btn{
		position: fixed;
		left: 30rpx;
		right: 30rpx;
		bottom: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 678rpx;
		height: 104rpx;
		border-radius: 92rpx;
		margin: 60rpx auto;
		font-size: $font-lg;
		color: #fff;
		background: #08AFFE;
	}
</style>
